<template>
    <div class="main">
        <!-- 用户信息区域 -->
        <div class="user-info">
            <div class="avatar">
                <img :src="user ? `${config.downloadUrl}?name=${JSON.parse(user).avator}` : ''" alt="头像">
            </div>
            <div class="info">
                <h2 class="username">{{ JSON.parse(user).username }}</h2>
                <div class="stats">
                    <span>个性签名：{{ JSON.parse(user).introduction }}</span>
                </div>
                <div class="location">地区：{{ JSON.parse(user).location }}</div>
            </div>
        </div>

        <!-- 导航标签 -->
        <div class="nav-tabs">
            <div class="tab active">歌单</div>
        </div>

        <!-- 歌单列表 -->
        <div class="playlist-section">
            <h3>我创建的歌单</h3>
            <div class="playlist-grid">
                <div class="playlist-card">
                    <div class="cover">
                        <img :src="`${config.downloadUrl}?name=${JSON.parse(user).avator}`" alt="歌单封面">
                    </div>
                    <div class="title">我的歌单</div>
                    <div class="count">0 首</div>
                </div>
            </div>
             <el-divider />
            <h3>我收藏的歌单</h3>
            <div class="playlist-grid">
                <div class="playlist-card">
                    <div class="cover">
                        <img :src="`${config.downloadUrl}?name=${JSON.parse(user).avator}`" alt="歌单封面">
                    </div>
                    <div class="title">我的歌单</div>
                    <div class="count">0 首</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="MyMusic">
import config from '../../../public/config.js'

const user = localStorage.getItem('user')
</script>

<style scoped>
/* 保留原有的滚动条样式 */
.main {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

/* 用户信息样式 */
.user-info {
    display: flex;
    padding: 20px;
    gap: 20px;
    margin-left: 2%;
}

.avatar img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

.info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
}

.stats {
    display: flex;
    gap: 20px;
    color: #666;
}

/* 导航标签样式 */
.nav-tabs {
    display: flex;
    border-bottom: 1px solid #e1e1e1;
    margin: 20px 0;
    margin-left: 2%;
}

.tab {
    padding: 10px 20px;
    cursor: pointer;
}

.tab.active {
    color: #c20c0c;
    border-bottom: 2px solid #c20c0c;
}

/* 歌单网格样式 */
.playlist-section{
    margin-left: 2%;
}
.playlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.playlist-card {
    cursor: pointer;
}

.playlist-card .cover img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
}

.playlist-card .title {
    margin-top: 8px;
    font-size: 14px;
}

.playlist-card .count {
    color: #666;
    font-size: 12px;
    margin-top: 4px;
}

/* 保留原有的滚动条样式 */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #e1e5ec;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #4b79a1, #283e51);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #3b607e, #1b2e38);
}
</style>
